import { Alert, Radio,Button } from 'antd';
import type { RadioChangeEvent } from 'antd';
import React ,{ useState } from 'react';
import { DeleteOutlined ,EditOutlined } from "@ant-design/icons"
import "./index.css"
import zfb from "../../../img/zfb.png"
import wxzf from "../../../img/wxzf.png"
import ybzf from "../../../img/ybzf.png"
import zxzf from "../../../img/zxzf.png"

const PayType = () => {
    const [value, setValue] = useState(1);

    const onChange = (e: RadioChangeEvent) => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };
    return (
        <fieldset>
             <Alert message="注:该支付方式启用并不能正常使用，需要开通支付功能才能使用相应的支付方式"  type="info" showIcon closable/>
             <div className="titlecom">支付方式</div>
             <div className="paytype">
                <div className="chose">
                    <img src={zfb} alt="" />
                    <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</p>
                    <div className="choice">
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>关闭</Radio>
                    </Radio.Group>
                    </div>
                    <div className="but">
                        <Button type="primary" icon={<EditOutlined />}>设置</Button>
                        <Button type="primary" danger icon={<DeleteOutlined />}>删除</Button>
                    </div>
                </div>
                <div className="chose">
                    <img src={wxzf} alt="" />
                    <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</p>
                    <div  className="choice">
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>关闭</Radio>
                    </Radio.Group>
                    </div>
                    <div className="but">
                        <Button type="primary" icon={<EditOutlined />}>设置</Button>
                        <Button type="primary" danger icon={<DeleteOutlined />}>删除</Button>
                    </div>
                </div>
                <div className="chose">
                    <img src={zxzf} alt="" />
                    <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</p>
                    <div  className="choice">
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>关闭</Radio>
                    </Radio.Group>
                    </div>
                    <div className="but">
                        <Button type="primary" icon={<EditOutlined />}>设置</Button>
                        <Button type="primary" danger icon={<DeleteOutlined />}>删除</Button>
                    </div>
                </div>
                <div className="chose">
                    <img src={ybzf} alt="" />
                    <p>支付宝(中国)网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案</p>
                    <div  className="choice">
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>启用</Radio>
                        <Radio value={2}>关闭</Radio>
                    </Radio.Group>
                    </div>
                    <div className="but">
                        <Button type="primary" icon={<EditOutlined />}>设置</Button>
                        <Button type="primary" danger icon={<DeleteOutlined />}>删除</Button>
                    </div>
                </div>
             </div>
        </fieldset>
    )
}

export default PayType
